<template>
  <div class="login-box">
    <div class="login-logo">
      <img src="~@/assets/logo.png" width="45" />
      <h1 class="mb-0 ml-2 text-3xl font-bold">轻量级自动化构建系统</h1>
    </div>
    <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
      <a-form-item>
        <a-input v-model:value="state.formInline.username" size="large" placeholder="minidevops">
          <template #prefix>
            <user-outlined type="user" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="state.formInline.password" size="large" type="password" placeholder="123456"
          autocomplete="new-password">
          <template #prefix>
            <lock-outlined type="user" />
          </template>
        </a-input>
      </a-form-item>
      <!-- <a-form-item>
        <a-input v-model:value="state.formInline.verifyCode" placeholder="验证码" :maxlength="4" size="large">
          <template #prefix>
            <SafetyOutlined />
          </template>
          <template #suffix>
            <img :src="state.captcha" class="absolute right-0 h-full cursor-pointer" />
          </template>
        </a-input>
      </a-form-item> -->
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';
const state = reactive({
  loading: false,
  captcha: '',
  formInline: {
    username: '',
    password: '',
    verifyCode: '',
    captchaId: '',
  },
});

const route = useRoute();
const router = useRouter();

const handleSubmit = async () => {
 
};
</script>

<style lang="less" scoped>
.login-box {
  display: flex;
  width: 100vw;
  height: 100vh;
  padding-top: 240px;
  background: url('~@/assets/login.svg');
  background-size: 100%;
  flex-direction: column;
  align-items: center;

  .login-logo {
    display: flex;
    margin-bottom: 30px;
    align-items: center;

    .svg-icon {
      font-size: 48px;
    }
  }

  :deep(.ant-form) {
    width: 400px;

    .ant-col {
      width: 100%;
    }

    .ant-form-item-label {
      padding-right: 6px;
    }
  }
}
</style>
